// 域名
var url = 'http://chat.ndstop.cn:9501/';
// 当前在线用户
var online_user = null;
// 当前用户
var current_user = null;
// 存储消息
var chatArr = [];
// 聊天模板
var left_tpl = "<div class='left_chat'><img class='header_img' src='{header}'><div class='left_chat_content'><p>{content}</p></div></div>";
var right_tpl = "<div class='right_chat'><img class='header_img' src='{header}'><div class='right_chat_content'><p>{content}</p></div></div>";



ws.onmessage = function(evt)
{
    var _receive_data = JSON.parse(evt.data);
    switch (_receive_data.code) {
        case 101:
            // 更新在线用户信息
            online_user = _receive_data.online_user;
            current_user = {'fd':_receive_data.fd ? _receive_data.fd : 0,'username':_receive_data.username ? _receive_data.username : ''};
            show_user();
            break;
        case 102:
            // 私聊消息
            var key = _receive_data.from_fd+'_'+_receive_data.to_fd;
            var e_key = _receive_data.to_fd+'_'+_receive_data.from_fd;
            show_msg(key,e_key);
            break;
        case 103:
            // 图片消息
            var key = _receive_data.from_fd+'_'+_receive_data.to_fd;
            var e_key = _receive_data.to_fd+'_'+_receive_data.from_fd;
            show_msg(key,e_key);
            break;
        default:
            break;
    }
};

ws.onclose = function(evt)
{
    console.log('WebSocketClosed!');
};

ws.onerror = function(evt)
{
    console.log('WebSocketError!');
};

// 显示在线用户
function show_user(){
    var tpl = "<li onclick='show_chat({fd})'><img src='{avatar}'><p>{username}</p><p>{createtime}<span class='msgtips' style='display: none'></span></p></li>";
    var str = '';
    for(var i in online_user){
        var data = JSON.parse(online_user[i]);
        if(data.fd != current_user.fd){
            str += tpl.replace('{fd}',data.fd).replace('{avatar}',data.avatar).replace('{username}',data.username).replace('{createtime}',data.logintime);
        }
    }
    $("#personal").html('<ul>'+str+'</ul>');
    $(".username").text(current_user.username);
}

// 显示消息
function show_msg(key,e_key){
    // 获取聊天数据
    $.post(url+'getMsgArr',{'key':key,'e_key':e_key},function (res) {
        var _data = JSON.parse(res);
        console.log(_data)
        // 追加聊天列表,只追加最新的一条
        var _chat_data = JSON.parse(_data.data[0]);
        var str = '';
        // 额外用户信息
        var object_fd = $('.chat').attr('user_fd');

        // 判断是否是当前的用户对消息
        if(object_fd && object_fd != _chat_data.from_fd && object_fd != _chat_data.to_fd) {
            var anther_user_info = JSON.parse(online_user[_chat_data.from_fd]);
            layer.msg('用户：'+anther_user_info.username+' 给您发了消息，请查看');
        } else {
            if(_chat_data.from_fd == current_user.fd){
                // 当前用户信息
                var current_user_info = JSON.parse(online_user[current_user.fd]);
                if(_chat_data.code == 102){
                    str += right_tpl.replace("{header}",current_user_info.avatar).replace("{content}",analysis_emoji(_chat_data.content));
                } else {
                    var img_tpl = "<img src='"+_chat_data.img+"'>";
                    str += right_tpl.replace("{header}",current_user_info.avatar).replace("{content}",img_tpl);
                }
            } else {
                // 其他用户信息
                var else_user_info = JSON.parse(online_user[_chat_data.from_fd]);
                if(_chat_data.code == 102){
                    str += left_tpl.replace("{header}",else_user_info.avatar).replace("{content}",analysis_emoji(_chat_data.content));
                } else {
                    var img_tpl = "<img src='"+_chat_data.img+"'>";
                    str += left_tpl.replace("{header}",else_user_info.avatar).replace("{content}",img_tpl);
                }
            }
            // 渲染到页面
            $(".content").append(str);
        }

    })
}

// 选择图片
function select_img()
{
    $("#getImg").click();
}
// tab切换
function changType(type){
    if(type == 1){
        $("#personal").addClass('active');
        $("#people").removeClass('active');
        $("#msg").removeClass('active');
    } else if(type == 2){
        $("#personal").removeClass('active');
        $("#people").addClass('active');
        $("#msg").removeClass('active');
    } else {
        $("#personal").removeClass('active');
        $("#people").removeClass('active');
        $("#msg").addClass('active');
    }
}

// 聊天界面显示
function show_chat(fd)
{
    var object_user = JSON.parse(online_user[fd]);
    var key = current_user.fd+'_'+fd;
    var e_key = fd+'_'+current_user.fd;

    // 获取当前用户对应目标用户的聊天记录
    $.post(url+'getMsgArr',{'key':key,'is_all':1,'e_key':e_key},function (res) {
        var _chat_data = JSON.parse(res);
        // 当前用户信息
        var current_user_info = JSON.parse(online_user[current_user.fd]);
        // 渲染所有聊天数据
        var str = '';
        var _chat_arr = _chat_data.data;
        if(_chat_arr.length > 0){
            console.log(_chat_arr)
            for(var i=_chat_arr.length-1;i>=0;i--){
                var _arr = JSON.parse(_chat_arr[i]);
                if(_arr.from_fd == current_user.fd){
                    // 来自自己的聊天
                    if(_arr.code == 102){
                        str += right_tpl.replace("{header}",current_user_info.avatar).replace("{content}",analysis_emoji(_arr.content));
                    } else {
                        var img_tpl = "<img src='"+_arr.img+"'>";
                        str += right_tpl.replace("{header}",current_user_info.avatar).replace("{content}",img_tpl);
                    }
                } else {
                    // 其他用户信息
                    var else_user_info = JSON.parse(online_user[_arr.from_fd]);
                    // 来自他人的聊天
                    if(_arr.code == 102){
                        str += left_tpl.replace("{header}",else_user_info.avatar).replace("{content}",analysis_emoji(_arr.content));
                    } else {
                        var img_tpl = "<img src='"+_arr.img+"'>";
                        str += left_tpl.replace("{header}",else_user_info.avatar).replace("{content}",img_tpl);
                    }
                }
            }
        }

        var content_tpl = "<div class='content'>"+str+"</div>";
        var str = "<div class='chat' user_fd='"+fd+"'><div class='header'><img src='"+object_user.avatar+"' style='width: 50px'> "+object_user.username+"</div>"+content_tpl+"<div id='emoji_box' style='display: none;'></div><div class='menu'><img onclick='select_img()' src='/static/image/send_img.png'><input type='file' style='display: none' id='getImg' onchange='sendImg("+fd+")'><img id='emoji_tip' onclick='createEmoji()' src='/static/image/emoji_img.png'></div><div class='sendmsg'><textarea id='text-input'></textarea></div><div class='btn_send'><button type='button' onclick='sendMsg("+fd+")' style='float: right' class='layui-btn layui-btn-normal'>发送消息</button></div></div>";

        // 显示处理
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['600px', '600px'], //宽高
            content: str
        });
    });
}

// 发送文字消息
function sendMsg(fd)
{
    var content = $("#text-input").val();
    if(content == '') return layer.msg('请输入要发送的内容');
    var message = {'type':102,'content':content,'tofd':fd};
    $("#text-input").val('');
    ws.send(JSON.stringify(message));
}

// 发送图片消息
function sendImg(fd)
{
    // FormData对象，来发送二进制文件。
    var formdata = new FormData();
    // 将文件追加到 formdata对象中。
    formdata.append("getImg",document.getElementById('getImg').files[0]);
    $.ajax({
        type: "POST",
        url: "/upload_img",
        data:formdata,
        /**
         * 必须false才会避开jQuery对 formdata 的默认处理
         * XMLHttpRequest会对 formdata 进行正确的处理
         */
        processData: false,
        // 告诉jQuery不要去设置Content-Type请求头
        contentType: false,
        dataType: "json",
        success: function(data){
            var _json = JSON.parse(data);
            var message = {'type':103,'img':_json.msg,'tofd':fd};
            $("#getImg").val('');
            ws.send(JSON.stringify(message));
        },
        error: function(jqXHR){
            layer.msg("发生错误：" + jqXHR.status);
        },
    });
}

function createEmoji(){
    // 显示表情
    var emoji_div = document.getElementById("emoji_box");
    console.log(emoji_div.style.display)
    if(emoji_div.style.display === 'block'){
        emoji_div.style.display = 'none';
    } else {
        emoji_div.style.display = 'block';
        show_biaoqing();
    }
}

// 显示表情
function show_biaoqing() {
    var row = 9, col = 9;
    var str = '<table class="emoji">';
    for (var i = 0; i < row; i++) {
        str += '<tr>';
        for (var j = 0; j < col; j++) {
            var n = i * col + j;
            str += '<td>' + (n > 71 ? '' : ('<img onclick="select_emoji(' + n + ');" src="/static/image/emoji/' + n + '.gif" />')) + '</td>';
        }
        str += '</tr>';
    }
    str += '</table>';
    $(".layui-layer-content").find("#emoji_box").html(str);
}

// 选择表情
function select_emoji(n)
{
    // 输入框
    var user_input = document.getElementById("text-input");
    cursor_insert(user_input, '{#' + n + '}');
    $("#emoji_box").fadeOut();
}

// 光标处插入内容
function cursor_insert(obj, txt) {
    var user_input = document.getElementById("text-input");
    if (document.selection) {
        obj.selection.createRange().text = txt;
    } else {
        var v = obj.value;
        var i = obj.selectionStart;
        obj.value = v.substr(0, i) + txt + v.substr(i);
        user_input.focus();
        obj.selectionStart = i + txt.length;
    }
}

// 解析消息中的表情
function analysis_emoji(str) {
    var p = /{#(\d|[1-6]\d|7[01])}/;
    if (p.test(str)) {
        return analysis_emoji(str.replace(p, "<img src='/static/image/emoji/$1.gif'/>"))
    } else {
        return str;
    }
}